<template>
  <el-empty v-show="!messages" description="还未发布职位，快去发布吧~" style="position: center"/>
  <div v-show="messages" class="main" >
    <div class="leftIndex">
      <el-card v-for="(item,index) in messages" :class="{ selected: item.id===selectedId }" class="indexItem"
               @click="selectJob(index)">
        <!-- 职业名称、薪资 -->
        <div style="display: flex">
          <el-text size="large" style="font-size: 20px;font-weight: bold">{{ item.jobName }}</el-text>
          <!-- 职业名称 -->
          <div style="flex-grow: 1"></div>
          <el-text style="font-size: 18px; font-weight: bold; color: #f26d49; float: right;">{{ item.salary }}</el-text>
          <!-- 薪资 -->
        </div>
        <!-- 标签 -->
        <div style="display: flex; padding: 10px 5px">
          <el-tag v-show="item.educationRequire!==''&&item.educationRequire!==null" style="margin-right: 5px">
            {{ item.educationRequire }}
          </el-tag>
          <el-tag v-show="item.ageRequire!==''&&item.ageRequire!==null" style="margin-right: 5px">{{
              item.ageRequire
            }}
          </el-tag>
          <el-tag v-for="i in item.skillRequire" v-show="item.skillRequire!==null" key="i" style="margin-right: 5px">
            {{ i }}
          </el-tag>
        </div>
      </el-card>
    </div>
    <div class="rightMessage">
      <el-card style="margin: 20px 20px;--el-card-padding: 0;">
        <div class="topMessage">
          <div style="display: flex">
            <el-text style="color: #FFFFFF;font-size: 24px; font-weight: bolder">{{ selectedJob.jobName }}</el-text>
            <el-text style="color: #f26d49;font-size: 24px; margin-left: 30px">{{ selectedJob.salary }}</el-text>
          </div>
          <div style="margin: 10px">
            <el-text style="color: #FFFFFF; font-size: 14px;margin-right: 20px">
              <el-icon>
                <Location/>
              </el-icon>
              {{ selectedJob.companyAddress }}
            </el-text>
            <!--            <div style="margin-left: 10px"></div>-->
            <el-text style="color: #FFFFFF; font-size: 14px;margin-right: 20px">
              <el-icon>
                <Reading/>
              </el-icon>
              {{ selectedJob.educationRequire }}
            </el-text>
            <!--            <div style="margin-left: 10px"></div>-->
            <el-text style="color: #FFFFFF; font-size: 14px;margin-right: 20px">
              <el-icon>
                <User/>
              </el-icon>
              {{ selectedJob.ageRequire }}
            </el-text>
            <!--            <div style="margin-left: 10px"></div>-->
            <el-button link
                       style="font-size: 18px; font-weight: bolder;color: chartreuse; float: right"
            @click="gotoUpdate">
              <el-icon color="chartreuse" style="margin-right: 10px">
                <Edit/>
              </el-icon>
              编辑信息
            </el-button>
          </div>
        </div>
        <div class="mainMessage">
          <!-- 工作介绍 -->
          <div style="margin-top: 10px">
            <el-text style="font-weight: bolder;font-size: 18px;">职位描述</el-text>
            <!-- 标签 -->
            <div style="display: flex; margin: 20px 0">
              <el-tag v-for="item in selectedJob.skillRequire" key="item" style="margin-right: 10px" type="success">
                {{ item }}
              </el-tag>
            </div>
            <el-text class="job-introduce" size="large">{{ selectedJob.jobIntroduce }}</el-text>
          </div>
          <div style="margin: 10px 0;color: #c0c4cc">
            <el-text>发布于：{{ selectedJob.postTime }}</el-text>
          </div>

          <div style="margin-top: 10px">
            <el-text style="font-weight: bolder;font-size: 18px; margin-bottom: 10px">推荐求职者</el-text>
            <!-- 卡片 -->
            <div style="display: flex; flex-wrap: wrap;">
              <el-card v-for="(item,index) in recommendSeeker" key="item.id"
                       style="width: 300px;border-radius: 10px; margin: 10px 10px;min-width: 400px"
                       @click="seekerClick(item.userId,index)">
                <div style="display: flex">
                  <el-text size="large" style="font-size: 22px;font-weight: bold">{{ item.name }}</el-text>
                  <div style="flex-grow: 1"></div>
                  <el-text v-show="item.expectPosition!==null&&item.expectPosition!==''"
                           style="font-size: 18px; font-weight: bold; color: dodgerblue; float: right;">{{ item.expectPosition }} ·
                    {{ item.expectSalary }}
                  </el-text>
                </div>
                <!-- 标签 -->
                <div style="display: flex; padding: 10px 5px">
                  <el-tag v-show="item.gender!==null&&item.gender!==''" style="margin-right: 5px">{{
                      item.gender
                    }}
                  </el-tag>
                  <el-tag v-show="item.graduateSchool!==null&&item.graduateSchool!==''" style="margin-right: 5px">
                    {{ item.graduateSchool }}
                  </el-tag>
                  <el-tag v-show="item.eduBackground!==null&&item.eduBackground!==''" style="margin-right: 5px">
                    {{ item.eduBackground }}
                  </el-tag>
                  <el-tag v-show="item.major!==null&&item.major!==''" style="margin-right: 5px">{{
                      item.major
                    }}
                  </el-tag>
                  <!--              <el-tag style="margin-right: 5px">{{ item.age_require }}</el-tag>-->
                  <el-tag v-for="i in item.skill" v-show="item.skill!==null&&item.skill!==''" style="margin-right: 5px">{{
                      i
                    }}
                  </el-tag>
                </div>
                <div>
                  <el-text truncated>
                    {{ item.introduce }}
                  </el-text>
                </div>
              </el-card>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <el-dialog
        v-model="messageDialog"
        :append-to-body="true"
        :close-on-click-modal="false"
        :lock-scroll="false"
        class="el-dialog"
        style="display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  overflow-y: scroll !important;
  max-height: 99vh !important;"
        title="求职者详细信息"
    >
      <el-card>
        <!--    <el-card style="width:720px;padding: 30px; margin: 30px 200px 30px 50px;min-height: calc(100vh - 125px); ">-->
        <template id="part1" style="display: flex;flex-direction: column">
          <div style="margin: 20px 0;">
            <el-text v-show="selectedSeeker.userNick!==''&&selectedSeeker.userNick!== null" class="title-div-text"
                     style="font-weight: bolder">
              {{ selectedSeeker.userNick }}
            </el-text>
            <el-text v-show="selectedSeeker.name!==''&&selectedSeeker.name!== null" class="title-div-text"
                     style="font-weight: bolder">
              ({{ selectedSeeker.name }})
            </el-text>
          </div>
          <div class="one-row" style="display: flex">
            <el-text class="text-item">
              <el-icon>
                <Calendar/>
              </el-icon>
              {{ birth }}
            </el-text>
            <el-text class="text-item">
              <el-icon>
                <User/>
              </el-icon>
              {{ selectedSeeker.gender }}
            </el-text>
            <el-text class="text-item">
              <el-icon>
                <Position/>
              </el-icon>
              {{ selectedResume.politicalStatus }}
            </el-text>
            <el-text v-show="selectedSeeker.idCard!==''&&selectedSeeker.idCard!==null" class="text-item">
              <el-icon>
                <Postcard/>
              </el-icon>
              {{ selectedSeeker.idCard }}
            </el-text>
          </div>
          <div class="one-row" style="display: flex">
            <el-text v-show="selectedResume.graduateTime!==null" class="text-item">
              <el-icon>
                <Suitcase/>
              </el-icon>
              {{ graduateTime }}届毕业生
            </el-text>
            <el-text class="text-item">
              <el-icon>
                <Reading/>
              </el-icon>
              {{ selectedResume.eduBackground }}
            </el-text>
            <el-text class="text-item">
              <el-icon>
                <PriceTag/>
              </el-icon>
              {{ selectedSeeker.status }}
            </el-text>
          </div>
          <div class="one-row" style="display: flex">
            <el-text class="text-item">
              <el-icon>
                <Phone/>
              </el-icon>
              {{ selectedSeeker.phone }}
            </el-text>
            <el-text class="text-item">
              <el-icon>
                <Message/>
              </el-icon>
              {{ selectedSeeker.email }}
            </el-text>
            <el-text class="text-item">
              <el-icon>
                <Place/>
              </el-icon>
              {{ selectedSeeker.address }}
            </el-text>
          </div>
        </template>

        <template id="part2" style="display: flex;flex-direction: column">
          <div class="title-div">
            <el-text class="title-div-text">
              个人介绍
            </el-text>
          </div>
          <div class="one-row">
            <el-text style="white-space: pre-wrap;">{{ selectedResume.introduce }}</el-text>
          </div>
        </template>

        <template id="part3" style="display: flex;flex-direction: column">
          <div class="title-div">
            <el-text class="title-div-text">
              期望职位
            </el-text>
          </div>
          <div class="one-row" style="display: flex">
            <el-text class="text-item">
              <el-icon>
                <Position/>
              </el-icon>
              {{ selectedResume.expectPosition }}
            </el-text>
            <el-text class="text-item">
              <el-icon>
                <Coin/>
              </el-icon>
              {{ selectedResume.expectSalary }}
            </el-text>
          </div>
        </template>

        <template id="part4" style="display: flex;flex-direction: column">
          <div class="title-div">
            <el-text class="title-div-text">
              工作/实习经历
            </el-text>
          </div>
          <div class="one-row">
            <el-text style="white-space: pre-wrap;">{{ selectedResume.workExperience }}</el-text>
          </div>
        </template>

        <template id="part5" style="display: flex;flex-direction: column">
          <div class="title-div">
            <el-text class="title-div-text">
              教育经历
            </el-text>
          </div>
          <div class="one-row" style="display: flex">
            <el-text style="font-weight: bolder; margin-right: 20px">
              <el-icon>
                <School/>
              </el-icon>
              {{ selectedResume.graduateSchool }}
            </el-text>
            <el-text>
              <el-icon>
                <Brush/>
              </el-icon>
              {{ selectedResume.major }}
            </el-text>
            <el-text v-show="selectedResume.eduBackground!==null">（{{ selectedResume.eduBackground }}）</el-text>
          </div>
        </template>

        <template id="part6" style="display: flex;flex-direction: column">
          <div class="title-div">
            <el-text class="title-div-text">
              专业技能
            </el-text>
          </div>
          <div v-show="skillTagForm.length>0" class="one-row" style="display: flex">
            <el-tag v-for="item in skillTagForm" key="item" style="margin-right: 10px">
              {{ item }}
            </el-tag>
          </div>
        </template>

        <template id="part7" style="display: flex;flex-direction: column">
          <div class="title-div">
            <el-text class="title-div-text">
              获奖记录
            </el-text>
          </div>
          <div class="one-row">
            <el-text style="white-space: pre-wrap;">{{ selectedResume.rewards }}</el-text>
          </div>
        </template>
      </el-card>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {recruiterApi} from "../../api/app.js"

//是否选中
const selectedId = ref()

//被选中岗位
const selectedJob = ref({})
// 已发布职位信息
// const messages = ref([]);
const messages = ref();
// 当前招聘者ID
const hrId = ref(0);
const router = useRouter();

onMounted(() => {
  hrId.value = JSON.parse(localStorage.getItem('recruiter')).id;
  getData();
})

// 格式化时间
const formatTime = (time) => {
  const date = new Date(time);
  const year = date.getFullYear();
  const month = ("0" + (date.getMonth() + 1)).slice(-2);
  const day = ("0" + date.getDate()).slice(-2);
  return `${year}-${month}-${day}`;
}

const getData = () => {
  recruiterApi.getAllJobByRecruiterId({
    size: 100,
    page: 1,
    hrId: hrId.value
  }).then(response => {
    messages.value = response.data;
    console.log("所有数据：", messages.value)
    if(messages.value!==null) {
      selectedJob.value = messages.value[0]
      selectedId.value = selectedJob.value.id
      console.log("被选中：", selectedJob.value)
    }else {
      selectedJob.value = {}
    }
  }).catch(error => {
    console.error(error);
  })
}

//点击左侧菜单选择岗位
const selectJob = (index) => {
  selectedJob.value = messages.value[index]
  selectedJob.value.postTime = formatTime(selectedJob.value.postTime)
  selectedId.value = selectedJob.value.id
}


//推荐求职者：
// const recommendSeeker = ref()
const recommendSeeker = ref([
  {
    id: "1776587528875298817",
    userId: "1776587528875298817",
    name: "王东",
    gender: "女",
    birth: "1999-06-14T16:00:00",
    phone: "13501012020",
    email: "111111@qq.com",
    politicalStatus: "群众",
    eduBackground: "本科",
    graduateSchool: "中南大学",
    graduateTime: "2023-06-05T16:00:00",
    major: "软件工程",
    skill: ["vue","HTML","css"],
    workExperience: "在XXX公司产品部工作（实习）两年，主要负责新员工入职培训、指定员工每月个人销售业绩表等。",
    rewards: "获得2021年全国大学生程序设计大赛一等奖。",
    expectPosition: "前端开发",
    expectSalary: "3-18k",
    introduce: "热爱美术。\n热爱编程。\n热爱生活。",
    userImage: null
  }, {
    id: "1776587528875298817",
    userId: "1776587528875298817",
    name: "李丽",
    gender: "女",
    birth: "1999-06-14T16:00:00",
    phone: "13501012020",
    email: "111111@qq.com",
    politicalStatus: "群众",
    eduBackground: "本科",
    graduateSchool: "中南大学",
    graduateTime: "2023-06-05T16:00:00",
    major: "软件工程",
    skill: ["vue","HTML","css"],
    workExperience: "在XXX公司产品部工作（实习）两年，主要负责新员工入职培训、指定员工每月个人销售业绩表等。",
    rewards: "获得2021年全国大学生程序设计大赛一等奖。",
    expectPosition: "前端开发",
    expectSalary: "3-18k",
    introduce: "热爱美术。\n热爱编程。\n热爱生活。",
    userImage: null
  }, {
    id: "1776587528875298817",
    userId: "1776587528875298817",
    name: "刘强",
    gender: "女",
    birth: "1999-06-14T16:00:00",
    phone: "13501012020",
    email: "111111@qq.com",
    politicalStatus: "群众",
    eduBackground: "本科",
    graduateSchool: "中南大学",
    graduateTime: "2023-06-05T16:00:00",
    major: "软件工程",
    skill: ["vue","HTML","css"],
    workExperience: "在XXX公司产品部工作（实习）两年，主要负责新员工入职培训、指定员工每月个人销售业绩表等。",
    rewards: "获得2021年全国大学生程序设计大赛一等奖。",
    expectPosition: "前端开发",
    expectSalary: "3-18k",
    introduce: "热爱美术。\n热爱编程。\n热爱生活。",
    userImage: null
  }, {
    id: "1776587528875298817",
    userId: "1776587528875298817",
    name: "赵芳",
    gender: "女",
    birth: "1999-06-14T16:00:00",
    phone: "13501012020",
    email: "111111@qq.com",
    politicalStatus: "群众",
    eduBackground: "本科",
    graduateSchool: "中南大学",
    graduateTime: "2023-06-05T16:00:00",
    major: "软件工程",
    skill: ["vue","HTML","css"],
    workExperience: "在XXX公司产品部工作（实习）两年，主要负责新员工入职培训、指定员工每月个人销售业绩表等。",
    rewards: "获得2021年全国大学生程序设计大赛一等奖。",
    expectPosition: "前端开发",
    expectSalary: "3-18k",
    introduce: "热爱美术。\n热爱编程。\n热爱生活。",
    userImage: null
  }, {
    id: "1776587528875298817",
    userId: "1776587528875298817",
    name: "张伟",
    gender: "女",
    birth: "1999-06-14T16:00:00",
    phone: "13501012020",
    email: "111111@qq.com",
    politicalStatus: "群众",
    eduBackground: "本科",
    graduateSchool: "中南大学",
    graduateTime: "2023-06-05T16:00:00",
    major: "软件工程",
    skill: ["vue","HTML","css"],
    workExperience: "在XXX公司产品部工作（实习）两年，主要负责新员工入职培训、指定员工每月个人销售业绩表等。",
    rewards: "获得2021年全国大学生程序设计大赛一等奖。",
    expectPosition: "前端开发",
    expectSalary: "3-18k",
    introduce: "热爱美术。\n热爱编程。\n热爱生活。",
    userImage: null
  }, {
    id: "1776587528875298817",
    userId: "1776587528875298817",
    name: "陈明",
    gender: "女",
    birth: "1999-06-14T16:00:00",
    phone: "13501012020",
    email: "111111@qq.com",
    politicalStatus: "群众",
    eduBackground: "本科",
    graduateSchool: "中南大学",
    graduateTime: "2023-06-05T16:00:00",
    major: "软件工程",
    skill: ["vue","HTML","css"],
    workExperience: "在XXX公司产品部工作（实习）两年，主要负责新员工入职培训、指定员工每月个人销售业绩表等。",
    rewards: "获得2021年全国大学生程序设计大赛一等奖。",
    expectPosition: "前端开发",
    expectSalary: "3-18k",
    introduce: "热爱美术。\n热爱编程。\n热爱生活。",
    userImage: null
  }
])
const selectedSeeker = ref({
  id: "",
  userId: "",
  name: "",
  gender: "",
  birth: "",
  phone: "",
  email: "",
  politicalStatus: "",
  eduBackground: "",
  graduateSchool: "",
  graduateTime: "",
  major: "",
  skill: "",
  workExperience: "",
  rewards: "",
  expectPosition: "",
  expectSalary: "",
  introduce: "",
  userImage: null
})
const selectedResume = ref()
const messageDialog = ref(false)
const graduateTime = ref('')
const birth = ref('')
const skillTagForm = ref([])
const getRecommend = () => {
  //获取推荐的求职者信息
  console.log("获取推荐的求职者信息")
}
const seekerClick = (id, index) => {
  selectedResume.value = recommendSeeker.value[index]
  // console.log("selected:",selectedResume.value)
  // console.log("recommend:",recommendSeeker)
  // console.log("index:",index)
  getMessage(selectedResume.value.userId)
  messageDialog.value = true
}

const getMessage = (id) => {
  recruiterApi.getSeekerMessage({id: id})
      .then((res) => {
        console.log(res)
        selectedSeeker.value = res.data
      })
      .catch((error) => {
        console.log(error)
      })
}

const gotoUpdate = () =>{
  router.push({path: '/recruiterMain/selfManage/jobMessageDetail', query: selectedJob.value});
}
</script>

<style scoped>
* {
  /*background-color: red;*/
  padding: 0;
  margin: 0;
}

.main {
  position: fixed;
  width: 100%;
}

.leftIndex {
  float: left;
  width: 32%; /* 左侧容器宽度 */
  /*flex-grow: 1;*/
  /*background-color: #c0c4cc;*/
  /*min-width: 450px;*/
  /*max-width: 450px;*/
  padding: 10px 0;
  max-height: 750px;
  overflow-y: auto;
  scrollbar-width: none; /* 对于Firefox的滚动条样式 */
}

/* 针对WebKit浏览器的滚动条样式 */
.leftIndex::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none; /* 对于Chrome, Safari和Opera */
}

.leftIndex .indexItem {
  margin: 15px 60px;
}

.rightMessage {
  float: right;
  width: 68%;
  /*background-color: #f26d49;*/
  max-height: 750px;
  overflow-y: auto;
  /*min-width: 900px;*/
  scrollbar-width: none; /* 对于Firefox的滚动条样式 */
}

/* 针对WebKit浏览器的滚动条样式 */
.rightMessage::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none; /* 对于Chrome, Safari和Opera */
}

.topMessage {
  background-color: #39566c;
  padding: 30px 60px 10px 60px;
}

.mainMessage {
  margin: 5px 40px;
}

.job-introduce {
  white-space: pre-wrap; /* 或者使用 pre-line */
}

.company-pane {
  margin: 30px 50px;
  display: grid;
  background-color: #f8f8f8;
  grid-template-areas:
      "p1 p2"
      "p3 p4"
      "p5 p5";
}

.company-item {
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
}

.t1 {
  margin-bottom: 10px;
}

/*被选择的放大*/
.selected {
  transform: scale(1.1); /* 设置放大倍数 */
}

/*dialog*/
.title-div {
  border-left: 5px solid #00ab6d;
  margin: 10px 0;
}

.title-div-text {
  margin-left: 10px;
  font-size: 20px;
  color: black;
}

.button-item {
  float: right;
  color: #00ab6d;
  margin-left: 10px;
}

.text-item {
  margin-right: 20px;
}

.one-row {
  margin-bottom: 5px;
}
</style>
